<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="undebounce" autofocus placeholder="请输入您要的搜索内容">
    <script>
        window.onload = function () {
            // let t = 2000;
            // let t1 = +new Date();
            const input = document.getElementById('undebounce');
            // 防抖 单位时间内如何减少执行次数
            // const ajax = (event) => {
            //     let keyword = event.target.value;
            //     let t2 = +new Date();
            //console.log(+new Date());// 时间戳 ;"+" 使日期对象 转换为 数字类型
            //     // console.log(-----);
            //     if (t2 - t1 > t) {
            //         console.log(keyword);
            //         t1 = t2;
            //     }

            //input.addEventListener('keyup', ajax)

            // 什么是 回调函数 ?
            // 1.keyup 在一开始就声明了 被放在了事件池event loop里了
            // 2.事件处理函数是在事件发生时触发并执行
            // 3.异步处理函数,事件发生时 回到 event loop 找出事件处理函数调用执行 
            // 写个 debounceAjax
            const ajax = (event) => { console.log('搜索', event.target.value) }
            const debounce = (cb, t) => {
                return cb;
            }
            const debounceAjax = debounce(ajax, t);//左边是右边的函数执行结果
            input.addEventListener('keyup', debounceAjax);//第二个参数一定要是个函数
        }



    </script>
</body>

</html>